﻿{% extends "base/index.html" %}


{% block css %}
    <link rel="stylesheet" href="/static/css/admin.css">
    <link rel="stylesheet" href="/static/ztree3/css/bootstrapStyle/bootstrapStyle.css" type="text/css">
{% endblock %}


{% block center %}

    <!--用户信息-->
    <div class="panel panel-default center-top" style="min-width:auto">
        <div class="panel-heading">
            <div class="row" style="padding-top:5px;padding-left:10px;">
                <div class="col-sm-6">
                    <a href="" class="btn btn-sm btn-success" data-toggle="modal" data-target="#idcModal"> 添加 </a>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div style="margin-bottom: 10px;">
                <div class="col-sm-12">
                    <table class="table table-hover">
                        <thead>
                        <tr style="background-color: #f5f5f5;">
                            <th>ID</th>
                            <th>机房</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for i in data_list %}
                            <tr name="tbody">
                                <td>{{ i.id }}</td>
                                <td>{{ i.idc_name }}</td>
                                <td>{{ i.idc_msg }}</td>
                                <td style="padding-left:5px;">
                                    <a href="javascript:;" style="text-decoration:none;" idc_id="{{ i.id }}"
                                       name="edit-idc" data-toggle="tooltip" data-placement="left" title="修改"><span
                                            class="fa fa-pencil"></span> </a>&nbsp;&nbsp;&nbsp;
                                    <a href="javascript:;" style="text-decoration:none;" idc_id="{{ i.id }}"
                                       name="del-idc" data-toggle="tooltip" data-placement="right" title="删除"><span
                                            class="fa fa-trash"></span> </a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <div class="text-right" style="margin-top:-30px;padding-right:9%">
                        <ul class="pagination" id="pager">
                            <li class="previous"><a href="/cmdb/idc/1/">首页</a></li>
                            {#上一页按钮开始#}
                            {# 如果当前页有上一页#}
                            {% if data_list.has_previous %}
                                {#  当前页的上一页按钮正常使用#}
                                <li class="previous"><a href="/cmdb/idc/{{ data_list.previous_page_number }}/">上一页</a>
                                </li>
                            {% else %}
                                {# 当前页的不存在上一页时,上一页的按钮不可用#}
                                <li class="previous disabled"><a href="javascript:;">上一页</a></li>
                            {% endif %}
                            {#上一页按钮结束#}
                            {# 页码开始#}
                            {% for num in page_list %}
                                {% if num == currentPage %}
                                    <li class="item active"><a href="/cmdb/idc/{{ num }}/">{{ num }}</a></li>
                                {% else %}
                                    <li class="item"><a href="/cmdb/idc/{{ num }}/">{{ num }}</a></li>
                                {% endif %}
                            {% endfor %}
                            {#页码结束#}
                            {# 下一页按钮开始#}
                            {% if data_list.has_next %}
                                <li class="next"><a href="/cmdb/idc/{{ data_list.next_page_number }}/">下一页</a></li>
                            {% else %}
                                <li class="next disabled"><a href="javascript:;">下一页</a></li>
                            {% endif %}
                            <li class="previous"><a href="/cmdb/idc/{{ page_nums }}/">尾页</a></li>
                            {# 下一页按钮结束#}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

<!-- Modal -->
{% block modal %}

    <div class="modal fade" id="idcModal" tabindex="-1" role="dialog" aria-labelledby="idcModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="margin-top:135px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="idcModalLabel">添加IDC</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>机房</label>
                        <input class="form-control" placeholder="机房" id="idc-name">
                    </div>
                    <div class="form-group">
                        <label>备注</label>
                        <input class="form-control" placeholder="备注" id="idc-msg">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="sub-idc">提交</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="edit-idcModal" tabindex="-1" role="dialog" aria-labelledby="edit-idcModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="margin-top:135px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="edit-idcModalLabel">修改IDC</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>机房</label>
                        <input class="form-control" placeholder="机房" id="edit-idc-name">
                    </div>
                    <div class="form-group">
                        <label>备注</label>
                        <input class="form-control" placeholder="备注" id="edit-idc-msg">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="sub-edit-idc">提交</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script type="text/javascript" src="/static/mystyle/js/cmdb.js"></script>

{% endblock %}


